<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>腾讯布局作业</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"/>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			.content{
				width: 1224px;
				height: 1872px;
				margin: 0 auto;
				background-color: pink;
			}
			/* 媒体查询 */
			@media(max-width:1225px) {
				.content{
					width: 100%;
				}
			}
			.color1{
				background-color: #008000;
				height: 1862px;
			}
			.color2{
				background-color: #009688;
				height: 1862px;
			}
		</style>
	</head>
	<body>
		<!-- space代表里面的栅格间隔15px -->
		<div class="content layui-row layui-col-space15">
			<div class="layui-col-xs12 layui-col-sm8">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-xs12">
						<div class="color1"></div>
					</div>
					<div class="layui-col-xs6">
						<div class="color2"></div>
					</div>
					<div class="layui-col-xs6">
						<div class="color1"></div>
					</div>
					<div class="layui-col-xs12">
						<div class="color2"></div>
					</div>
				</div>
			</div>
			
		</div>
	</body>
</html>
